<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        .box {
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            margin: 20px auto;
            width: 400px;
            height: 400px;
            background-color: cornsilk;
            border-right: 1px solid black;
            border-bottom: 1px solid black;
            position: relative;
        }
        .box div {
            box-sizing: border-box;
            width: 10px;
            height: 10px;
            border-top: 1px solid black;
            border-left: 1px solid black;
        }
        .snake {
            width: 10px;
            height: 10px;
            background-color: red;
            position: absolute;
        }
        .start {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            width: 90px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            background-color: seashell;
            border-radius: 10px;
            color: plum;
            font-size: 18px;
        }
        .barrier {
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: cyan;
            box-sizing: border-box;
            /* top: 50px;
            left: 50px; */
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="barrier"></div>
        <p class="snake"></p>
        <p class="start">点击开始</p>
    </div>
    <script>
        function getRandom (max,min){
            return parseInt(Math.random()*(max-min+1)+min);
        }

        // function createSnake(){
        //     var pEle = 
        // }
        
        function createBarrier(){
            var barrierBox = document.querySelector(".barrier");
            var x = getRandom(39,0) ; 
            var y = getRandom(39,0) ;
            console.log(x,y);
            barrierBox.style.left = `${x * 10}px`
            barrierBox.style.top = `${y * 10}px`
        }

        function createBox (){
            var boxEle = document.querySelector(".box");
            for( var i = 0 ; i < 40 ; i ++ ){
                for( var j = 0 ; j < 40 ; j ++ ){
                    var div = document.createElement("div");
                    boxEle.appendChild(div);
                }
            }
        }

        createBox();

        var direction = "left" ; 
        var speed = 10 ;
        var boxEle = document.querySelector(".box");
        var pEle = document.querySelector(".snake");
        var startEle = document.querySelector(".start");
        startEle.onclick = function (){
            startEle.style.display = "none" ;
            pEle.style.top = `0px` ;
            pEle.style.left = `0px` ;

            createBarrier();

            document.onkeydown = function ( event ){
                var e = event || window.event ;
                if ( e.key == 'ArrowRight') {
                    direction = 'left' ;
                    speed = Math.abs(speed); 
                } else if ( e.key == 'ArrowDown' ){
                    direction = 'top' ;
                    speed = Math.abs(speed) ;
                } else if ( e.key == 'ArrowLeft' ){
                    direction = 'left' ;
                    speed = -Math.abs(speed) ;
                } else if ( e.key == 'ArrowUp' ){
                    direction = 'top' ;
                    speed = -Math.abs(speed) ;
                }
            }
            var barrierBox = document.querySelector(".barrier");
            var gameEnd = setInterval(function(){
                pEle.style[direction] = `${ parseFloat(pEle.style[direction]) + speed }px` ;
                if ( pEle.offsetLeft == barrierBox.offsetLeft && pEle.offsetTop == barrierBox.offsetTop ) {
                    createBarrier();
                }
                // console.log(pEle.offsetLeft,pEle.offsetTop,barrierBox.offsetLeft,barrierBox.offsetTop);
                if ( pEle.offsetLeft > 390 || pEle.offsetLeft < 0 || pEle.offsetTop > 390 || pEle.offsetTop < 0 ){
                    clearInterval(gameEnd);
                    startEle.innerHTML = "GameOver"
                    startEle.style.display = "block" ;
                }
            },100);
        }
    </script>
</body>
</html>